page-messages {
    //下面的选择框样式
    .img-container{
        background: #F7F7F7;
        height: 10rem;
        img{
            display: block;
            width: 100%;
        }
    }
    .footer-btns{
        padding: 1.8rem 2rem;
        background: #fff;
        position: fixed;
        width: 100%;
        bottom: 5rem;
        left: 0;
        line-height: 1.4rem;
        color: #333333;
        @include flex(space-between);
        .del{
            color: #3A80F3
        }
        .input-radio{
            span{
                display: inline-block;
                position: relative;
                border: solid 1px #999;
                @include border-radius(0.7rem);
                @include box-area(1.5rem,center);
                vertical-align: middle;
            }
            b{
                width: 0.5rem;
                height: 0.5rem;
                @include border-radius(0.25rem);
                background: #999;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                display: none;
            }
            input[type=checkbox]{
                opacity: 0;
                position: absolute;
            }
            input[type=checkbox]:checked~span b{
                display: block;
            }
            font{
                line-height: 1.4rem;
                font-size: 1.4rem;
                color: #333333;
            }
        }
    }
    
    .scroll-bar{
        background: #fff;
        padding: 2.5rem 0 1.2rem;
        overflow: scroll;
        .scroll-bar-content{
            width: auto;
            padding: 0 4px;
            @include flex(flex-start);
            flex-wrap: nowrap;
            span{
                display: inline-block;
                margin-right: 3rem;
                color: #333333;
                font-size: 1.2rem;
                white-space: nowrap;
            }
            span:last-child{
                margin-right: 0;
            }
            .active{
                color: $active-color;
            }
        }
        
    }   

    .user-content{
        background: #f7f7f7;
        margin-top: 1.4rem;
        padding-bottom: 4.2rem;
        .user-cell{
            .user-cell-grid{
                @include flex(space-between);
                margin-bottom: 1rem;
                padding: 1.4rem 1.4rem 0 1.4rem;
                background: #ffffff;
                h3{
                    font-size: 1.4rem;
                    color: #333333;
                    margin: 0.5rem 0;
                }
                .times{
                    color: $font-text-color;
                    margin: 0.5rem 0 1rem 0;
                    font-size: 1.2rem;
                    b{
                        float: right;
                        color: #ED5736;
                    }
                }
                .house{
                    .house_content{
                        .house_img{
                            position: relative;
                            background-size: 100%;
                            background-position: center;
                            background-repeat: no-repeat;
                            height: 14rem;
                        }
                        .house_info{
                            padding: 0.5rem;
                            p{
                                margin: 0;
                                padding: 5px 0;
                                .iconfont{
                                    font-size: 1.3rem;
                                    font-weight: 600;
                                }
                                .icon-map_map{
                                    color: #3A80F3;
                                    margin-right: 5px;
                                }
                                label{
                                    margin-right: 10px;
                                    color: #666666;
                                    .iconfont{
                                        margin-right: 3px;
                                    }
                                }
                                label:last-child{
                                    margin-left: 30px;
                                    margin-right: 0;
                                }
                                font{
                                    color: #666666;
                                    font-size: 1.1rem;
                                }
                                span{
                                    float: right;
                                    font-size: 1.6rem;
                                    color: #ED5736;
                                }
                            }
                        }
                        
                    }
                    .service_content{
                        padding: 1rem;
                        border: solid 1px #cccccc;
                        @include border-radius(5px);
                        @include flex(space-between);
                        .service_img{
                            width: 6.4rem;
                            height: 6.4rem;
                            background-position: center;
                            background-size: 100%;
                            background-repeat: no-repeat;
                        }
                        .service_info{
                            width: calc(100% - 6.8rem);
                            height: 6.4rem;
                            @include flex(space-between);
                            flex-direction: column;
                            h5{
                                margin: 0;
                                font-size: 1.4rem;
                                color: #333333;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            p{
                                margin: 0;
                                color: $font-text-color;
                                .stars{
                                    float: right;
                                    i:first-child{
                                        margin-left: 0;
                                    }
                                    i{
                                        font-size: 1.2rem;
                                        margin-left: 3px;
                                    }
                                    .icon-star1{
                                        color: $font-color;
                                    }
                                    .icon-star{
                                        color: #F4C20D;
                                    }
                                }
                                .price{
                                    color: #ED5736;
                                    font-size: 1.6rem;
                                    float: right;
                                }
                            }

                        }
                    }
                }
                .house-more{
                    border-top: solid 1px #f7f7f7;
                    .connect{
                        height: 4rem;
                        line-height: 4rem;
                        @include flex(space-around);
                       
                        span{
                            display: inline-block;
                            width: 50%;
                            font-size: 1.2rem;
                            color: #333333;
                            i{
                                font-size: 1.5rem;
                                vertical-align: bottom;
                                margin-right: 5px;
                            }
                            .icon-notice_emil{
                                color: #3A80F3;
                            }
                            .icon-notice_phone{
                                color: #4CDA64;
                            }
                        }
                        
                    }
                    p {
                        color: $font-text-color;
                        margin: 0;
                        padding-bottom: 1rem;
                    }
                }
                .house-btn{
                    padding-top: 1.2rem;
                    padding-bottom: 1.2rem;
                    border-top: solid 1px #f7f7f7;
                    .btn-group{
                        @include flex(flex-end);
                        
                        button{
                            width: 30%;
                            margin-right: 4.9%;
                            height: 3rem;
                            line-height: 3rem;
                            font-size: 1.4rem;
                        }
                        button:last-child{
                            margin-right: 0;
                        }
                    }
                    .payment-button{
                        @include flex(space-between);
                        flex-wrap: wrap;
                        button{
                            width: 45%;
                            height: 3rem;
                            line-height: 3rem;
                            font-size: 1.4rem;
                        }
                        button:last-child{
                            margin-right: 0;
                        }
                    }
                }
            }
        }

    }
    .pay_mount{
        text-align: right;
        font-size: 1.4rem;
        padding-bottom: 1rem; 
        span{
            color: #ED5736;
        }
    }
    .system-content{
        padding: 1rem;
        .system-content-cell{
            text-align: center;
            .cell{
                @include flex(flex-start);
                .cell-icon{
                    
                    width: 5.4rem;
                    text-align: center;
                    i {
                        display: inline-block;
                        width: 4rem;
                        height: 4rem;
                        font-size: 2.5rem;
                        text-align: center;
                        line-height: 4rem;
                        color: #ffffff;
                        @include border-radius(2rem);
                        background: #F06521;
                    }
                }
                .cell-content{
                    max-width: 240px;
                    padding: 1rem;
                    background: #fff;
                    @include border-radius(5px);
                    p{
                        text-align: left;
                        margin: 0;
                        color:$font-text-color;
                        font-size: 1.2rem;
                    }
                }
            }
            .times{
                display: inline-block;
                background: #D6D6D6;
                margin: 1.6rem 0 2rem 0;
                padding: 3px 6px;
                font-size: 1.2rem;
                @include border-radius(5px);
                color: #fff;
                font{
                    margin-left: 1rem;
                }
                .noread{
                    color: $active-color;
                }
            }
        }
       
    }
}
